<template>
	<view class="c-container" style="border-bottom: 1px solid #dedede;">
		<view class="tab-control">
			<view class="tab-control-item" v-if="hotelProtocol.length > 0" :class="{active: currentIndex == 0}" @click="tabClick('protocol')">
				<text>酒店协议</text>
			</view>
			<view class="tab-control-item" v-if="hotelService.length > 0" :class="{active: currentIndex == 1}" @click="tabClick('service')">
				<text>酒店服务</text>
			</view>
		</view>
		<swiper :style="{height: swiperHeight + 'px'}" @change="swiperChange" :current="swiperCurrent">
			<swiper-item @touchmove.stop>
				<view class="swiper-item">
					<protocol ref="protocol" :parent="_self" :hotelProtocol="hotelProtocol" class="protocolBox" />
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop>
				<view class="swiper-item">
					<items ref="protocol" :parent="_self" :hotelService="hotelService" id="service" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 功能组件
	import {updateSwiperHeight} from '@/utils/funs.js';
	// 子组件
	import protocol from './detail/protocol.vue'
	import items from './detail/items.vue'
	export default {
		props: {
			hotelProtocol: {
				type: Array,
				default () {
					return []
				}
			},
			hotelService: {
				type: Array,
				default () {
					return []
				}
			}

		},
		components: {
			protocol,
			items
		},
		data() {
			return {
				currentIndex: 0,
				swiperCurrent: 0,
				swiperHeight: 0, // 滑动区域高度
				swiperItemHeights: []
			}
		},
		beforeMount() {
			this.updateSwiperHeight = updateSwiperHeight;
		},
		mounted() {
			if(this.hotelProtocol.length == 0){
				this.currentIndex = 1;
				this.swiperCurrent = 1;
			}
		},
		methods: {
			tabClick(type) {
				switch (type) {
					case 'protocol':
						this.currentIndex = 0;
						this.swiperCurrent = 0;
						break;

					case 'service':
						this.currentIndex = 1
						this.swiperCurrent = 1;
						break;

				}
			},
			swiperChange(e) {
				let index = e.detail.current
				this.currentIndex = index
			},
		}
	}
</script>

<style lang="less">
	.tab-control {
		display: flex;
		text-align: center;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		background-color: #fff;

		.tab-control-item {
			flex: 0 25%;
		}

		.tab-control-item text {
			padding: 5px;
		}

		.active {
			color: #007AFF;
		}

		.active text {
			border-bottom: 3px solid #007AFF;
		}

	}
</style>
